

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data Jelly Fish - 数据调度中心</title>
    <link rel="stylesheet" href="../data-jelly-fish/css/layui.css">
    <link rel="icon" href="../data-jelly-fish/images/icon.jpg" type="image/x-icon" />
    <link rel="shortcut icon" href="../data-jelly-fish/images/icon.jpg" type="image/x-icon"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <img class="iconImg" width="46px" src="../data-jelly-fish/images/icon.jpg">
        <div class="layui-logo">Data Jelly Fish v1.0.0</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right"  id="nav" layui-filter="test" >
<!--            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    Admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>-->
            <!--<li class="layui-nav-item"><a href="https://gitee.com/alenfive/data-jelly-fish" target="_blank">Gitee</a></li>-->
            <li class="layui-nav-item"><a href='https://gitee.com/alenfive/data-jelly-fish'><img src='https://gitee.com/alenfive/data-jelly-fish/badge/star.svg?theme=dark' alt='star'></img></a></li>
        </ul>
        <div class="header-profile"><a th:text="${profile.nickname}">Guest</a><a class="logout-btn" href="../logout">[退出]</a></div>
    </div>

    <div class="layui-side layui-bg-black" >
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">

                <li class="layui-nav-item layui-this" ><a href="javascript:;" page="../view/index">概览</a></li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">配置</a>
                    <dl class="layui-nav-child">
                        <dd class=""><a href="javascript:;" page="../view/topic">TOPIC管理</a></dd>
                        <dd><a href="javascript:;" page="../view/consumer">消费者管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">数据空间</a>
                    <input type="text" name="table" onkeyup="filterTableName(this)" lay-verify="title" style="color:rgba(255,255,255,.7);background-color: #23262E;border: 0px; padding-left: 20px;" autocomplete="off" placeholder="输入过滤条件" class="layui-input">
                    <dl class="layui-nav-child" id="table-list">
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe id="iframeMain" src="" style="width: 100%;border:0px;height: calc(100% - 10px)" ></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © alenfive.github.com
    </div>
</div>
<script src="../data-jelly-fish/layui.js"></script>
<script>
    //JavaScript代码区域

    let tableList = null;

    var $ ;
    var element;
    layui.use('element', function(){
        $ = layui.jquery

        element = layui.element



        $.getJSON("../api/table/table-list",function (data) {

            tableList = data.data;

            buildTableList(tableList);

            //默认显示页面
            initBody();
        })





    });

    function buildTableList(list){
        $("#table-list").html('');
        if (!list){
            $("#table-list").append('<dd><a href="javascript:;" >暂无</a></dd>');
            initEvent();
            return;
        }
        $.each(list,function (index,item) {
            $("#table-list").append('<dd><a href="javascript:;" page="../view/tableInfo?table='+item.table+'">'+item.table+'</a></dd>')
        })

        element.render('nav', "test");

        initEvent();
    }

    function initEvent() {

        $(".layui-side .layui-nav-item").click(function (e) {
            if ($(this).children(".layui-nav-child").length >0){
                $($(this).children(".layui-nav-child").children("dd")[0]).click();
            }else{
                let page = $(this).children("a").attr("page");
                window.location.hash = page;
                $("#iframeMain").attr("src",page);
            }
        })
        $(".layui-side dd>a").click(function (e) {
            let page = $(this).attr("page");
            window.location.hash = page;
            $("#iframeMain").attr("src",page);
            return false;
        });
    }

    function initBody(){
        var point = window.location.hash;
        var page = "../view/index";
        if (point != ''){
            page = point.substr(1);
        }
        $("dd").removeClass("layui-this")
        $("dd>a[page='"+page+"']").parent().addClass("layui-this");
        $("#iframeMain").attr("src",page);
    }

    function filterTableName(target){
        let keyword = $(target).val().toLowerCase();
        let filterRes = [];
        for (index in tableList){
            item = tableList[index];
            if (item.table.toLowerCase().indexOf(keyword) !=-1
            || item.name.toLowerCase().indexOf(keyword) !=-1){
                filterRes.push(item);
            }
        }
        buildTableList(filterRes);
    }
</script>

<style type="text/css">
.layui-logo{
    margin-left: 57px;
}
.iconImg{
    margin-left: 20px;
    margin-top: 6px;
    border-radius:25px;
}

#nav{
    right:100px;
}
.header-profile{
    line-height: 60px;
    float:right;
    margin-right: 20px;
}
.header-profile a{
    color: #fff;
}

.logout-btn{
    margin-left:10px;
}

</style>
</body>
</html>
